<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        通过display进行转换
            display:inline/block/inline-block/none

            display: none; 隐藏，不占位
            display的属性值不为none就显示了， 可以为display:inline/inline-block/block

            
            难点
                关系  一定要先确定是不是包含的关系，如果是包含的关系才能用空格 
     -->
     <style>
         *{padding:0;margin:0;}
         .box{
             width:300px; height:300px;
             background: red;
         }
         .box1{
             width:100px; height:100px; background: yellow;
             display: none;
             /* 隐藏 */
         }
         .box:hover .box1{
            display: inline;
            /* 显示 */
         }
         .box:hover p{
             display: none;
         }
     </style>
</head>
<body>
    <div class="box">
        <div class="box1">你好</div>
        <p>美丽</p>
    </div>
</body>
</html>